<!-- http://wiki.openstreetmap.org/wiki/Google_Maps_Example#Example_-_Using_Google_Maps_API_v3_setting_OSM_as_a_base_map_layer -->
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>SHAHED Demo</title>
  <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
  <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
  <link rel="stylesheet" href="css/shahed.css">
  
  <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false" type="text/javascript"></script>
  <script src="js/jquery-2.0.0.min.js"></script>
  <script src="jquery-ui/jquery-ui.js"></script>
  <script src="js/shahed.js" type="text/javascript"> </script>
 </head>
 
 <body>
  <div id="results-panel" class="submenu" style="background:#DEDEDE;">
    <label for="min">Minimum: </label>
    <input type="text" id="min" readonly="readonly" size="18"/>
    <br/>
    <label for="max">Maximum: </label>
    <input type="text" id="max" readonly="readonly" size="17"/>
    <br/>
    <label for="avg">Average: &nbsp;&nbsp; </label>
    <input type="text" id="avg" readonly="readonly" size="17"/>
    <br/>
  	<label for="time">Time (ms):</label>
    <input type="text" id="time" readonly="readonly" size="16"/>
    <br/>
  </div>

	<div id="panel2" class="submenu" style="background:#DEDEDE;height: 70px">
    <label for="fly-to">Fly to: </label>
    <input type="text" id="fly-to" placeholder="Type destination ..." size="17"/>
    <label> Data Set: </label>
    <select id="datasets" style="display: compact;">
      <option id="LST_Day_1km" value="MOLA/MYD11A1.005" selected="selected">Temperature Day</option>
      <option id="LST_Night_1km" value="MOLA/MYD11A1.005">Temperature Night</option>
    </select>
    <br/>
    <label for="fromDatePicker" style="display: inline;"> From Date: </label>
    <input type="text" value="01/01/2013" name="fromDatePicker" id="fromDatePicker" style="display: inline; width: 120px;"/>
    <label for="toDatePicker" style="display: inline;"> To Date: </label>
    <input type="text" value="01/15/2013" name="toDatePicker" id="toDatePicker" style="display: inline; width: 120px;"/>
    <br/>
    <div id="date-range-selector"></div>
  </div>

  <div id="submissionFormDiv" class="submenu" title="submissionFormDivTitle" style="visibility: hidden">
    <fieldset>
      <form title="submissionFormTitle" id="submissionForm" method="post" name="submissionForm" action="aggregate_query.cgi" >
        <input type="text" name="title" id="title" />
        <input name="dataset" id="dataset" type="hidden" readonly="readonly" />
        <input name="dataset_url" id="dataset_url" type="hidden" readonly="readonly"/>
        <input id="fromDate" name="selectedFromDate" type="hidden" readonly="readonly">
        <input id="toDate" name="selectedToDate" type="hidden" readonly="readonly">
        <input type="submit" value="Submit">
      </form>
    </fieldset>
  </div>
	
 	<div id="map"> </div>
 	
 	<!-- Global ajax wait icon -->
 	<div id="fade"></div>
  <div id="modal">
      <img id="loader" src="images/wait.gif" />
  </div>
 	
 </body>
</html>